<template>
  <view class="page full p_default">
    <tuniaoui-wx-user-info
      v-model="showAuthorizationModal"
      @updated="updatedUserInfoEvent"
    ></tuniaoui-wx-user-info>

    <view class="radius_default p_md header mb_lg">
      <view class="align-items_center">
        <view class="">
          <u-avatar
              :src="userInfo.headimgurl | imgPath"
              size="4rem"
               fontSize="18"
            randomBgColor
            ></u-avatar>
        
          <view class="t_center mt_xs">
            <view class="username">王立志</view>
          </view>
        </view>
        <view class="ml_lg flex_1">
          <view class="align-items_center justify_between mb_default">
            <view class="t_center">
              <view class="column-value">{{ points }}</view>
              <view class="column-title">积分</view>
            </view>
            <view class="t_center">
              <view class="column-value">{{ countshow }}</view>
              <view class="column-title">开启次数</view>
            </view>
            <view class="t_center">
              <view class="column-value"> {{ countcomplete }}</view>
              <view class="column-title">当日统计</view>
            </view>
          </view>
          <view class="justify_between">
            <view></view>
            <view>
              <u-button
                type="primary"
                text="更新头像和昵称"
                shape="circle"
                size="small"
                @click="showAuthorizationModal = true"
              ></u-button>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="section pitch_sm pt_default">
      <!-- <view class="row">
        <view class="section pitch_sm">
          <view class="row justify_center">
            <u-avatar
              :src="userInfo.headimgurl | imgPath"
              size="6rem"
            ></u-avatar>
          </view>
          <view class="row justify_center">{{ userInfo.nickname }}</view>
          <view class="row">
            <u-button
              type="primary"
              text="更新头像和昵称"
              shape="circle"
              @click="showAuthorizationModal = true"
            ></u-button>
          </view>
        </view>
      </view>
      <view class="row pitch_lg">
        <view class="card radius_default p_sm justify_between">
          <view>积分:{{ points }}</view>
          <view>
            <span class="daily-stats">
              当日统计: {{ countshow }},{{ countcomplete }}
            </span>
          </view>
        </view>
      </view> -->
      <view class="row">
        <view class="card radius_lg">
          <u-cell-group :border="false">
            <u-cell
             @click="navigate('/pages/collect/collect')"
           
              title="我的收藏"
              isLink
              :border="false"
            ></u-cell>
          </u-cell-group>
        </view>
      </view>
      <view class="row">
        <view class="card radius_lg">
          <u-cell-group :border="false">
            <u-cell
             @click="navigate('/pages/collect/collect')"
           
              title="我的设备"
              isLink
              :border="false"
            ></u-cell>
          </u-cell-group>
        </view>
      </view>
      <view class="row">
        <view class="card radius_lg">
          <u-cell-group :border="false">
            <u-cell
             @click="navigate('/pages/review/review')"
              
              title="信息审核"
              isLink
              :border="false"
            ></u-cell>
          </u-cell-group>
        </view>
      </view>
      <view class="row">
        <view class="card radius_lg">
          <u-cell-group :border="false">
            <u-cell
             @click="navigate('/pages/operateList/operateList')"
              
              title="操作记录"
              isLink
              :border="false"
            ></u-cell>
          </u-cell-group>
        </view>
      </view>
      <view class="row">
        <view class="card radius_lg">
          <u-cell-group :border="false">
            <u-cell
             @click="clearCacheAndReload"
              
              title="清除缓存"
              isLink
              :border="false"
            ></u-cell>
          </u-cell-group>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import TnuiWxUserInfo from '@/components/uni-dateformat/components/uni-dateformat/uni-dateformat.vue';
import { userInfo_api, editMember_api } from '../../api/index.js';
import { imgPath } from '@/libs/filters.js';
import { navigate } from '../../service/navigate';

export default {
  components: {
    TnuiWxUserInfo,
  },
  data() {
    return {
      showAuthorizationModal: false,
      userInfo: {
        nickname: 'test',
      },
      points: 0,
      countshow: 0,
      countcomplete: 0,
      scrollTop: '',
    };
  },
  filters: {
    imgPath,
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onShareAppMessage() {},
  onShareTimeline() {},
  onShow() {
    this.getUserInfo();
  },
  mounted() {},
  methods: {
    navigate,
    async getUserInfo() {
      let res = await userInfo_api();
      if (res.code === 0) {
        this.userInfo = res.data;
        console.log('userInfo', this.userInfo);
      }
    },
    goPage(url) {
      uni.navigateTo({
        url: url,
      });
    },
    clearCacheAndReload() {
      uni.clearStorageSync(); // Clears all data in the local storage
      uni.showToast({
        title: '缓存清除成功',
        icon: 'success',
        duration: 2000,
        complete: () => {
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/index/index', // Adjust this URL to your main page or the page you want to reload
            });
          }, 2000); // Wait for the toast to finish before reloading
        },
      });
    },
    async updatedUserInfoEvent(info) {
      //console.log(info)
      // editMember_api
      uni.showLoading({
        title: '加载中...',
        mask: true,
      });
      let res = await editMember_api({
        nickname: info.nickname,
        headimgurl: info.avatar,
      });
      if (res.code === 0) {
        this.showAuthorizationModal = false;
        uni.showToast({
          title: '更新成功',
        });
        this.getUserInfo();
      } else {
        uni.showToast({
          title: res.msg,
        });
      }
    },
    goDetail(url) {
      uni.navigateTo({
        url: url,
      });
    },
    bindPhone() {
      if (!this.userInfo.mobile) {
        uni.navigateTo({
          url: '/pages/open/open?type=phone',
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
page {
  height: 100%;
  width: 100%;
}

.page {
  height: 100%;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(48, 182, 116, .6) 0%,
    rgba(228, 243, 237, 1) 30%
  );
}
.header {
  background: linear-gradient(180deg, #d1f5e7, #f5f9f8);
}

.flex-box {
  display: flex;
  align-items: center;
  .phone {
    font-size: 28rpx;
    color: #444444;
    opacity: 0.7;
    margin-right: 30rpx;
  }
}

.username {
  font-size: 16px;
  font-weight: bold;
}

.column-title {

  font-size: 12px;
  color: #939598;
}
.column-value{
  font-size: 18px;
}
.card {
  background: #fff;
}
</style>

